<template>
	<view class="content">
		<view :style="{paddingTop:info.statusBarHeight+'rpx'}" class="head-box">
			<view class="head-b flex-align-center">
				<picker @change="changeCity" ref="pickerCity" mode="region" :value="region">
					<view class="coordinate flex-align-center">
						<text :style="{fontSize:info.cityFontSize+'rpx'}">{{info.city}}</text>
						<uv-icon name="arrow-down-fill" color="#707070" size="9"></uv-icon>
					</view>
				</picker>
				<view class="sort flex-align-center">
					<view @click="onChangeType(1)"
						:class="['title-item',info.type==1?'title-item-active':'','flex-center-r']">
						<text>赛事</text>
						<view :class="['bottom-line',info.type==1?'bottom-line-active':'']"></view>
					</view>
					<view @click="onChangeType(2)"
						:class="['title-item',info.type==2?'title-item-active':'','flex-center-r']">
						<text>推荐</text>
						<view :class="['bottom-line',info.type==2?'bottom-line-active':'']"></view>
					</view>
					<view @click="onChangeType(3)"
						:class="['title-item',info.type==3?'title-item-active':'','flex-center-r']">
						<text>关注</text>
						<view :class="['bottom-line',info.type==3?'bottom-line-active':'']"></view>
					</view>

				</view>
			</view>
		</view>
		<!-- 赛事 -->
		<view v-if="info.type==1">
			<Competition ref="childrenRef1" :city="info.city"></Competition>
		</view>
		<!-- 推荐 -->
		<view v-if="info.type==2">
			<Recommended ref="childrenRef2" :city="info.city"></Recommended>
		</view>
		<!-- 关注 -->
		<view v-if="info.type==3">
			<Follow ref="childrenRef3" :city="info.city"></Follow>
		</view>
		<!-- <tabBar :selectedIndex="1"></tabBar> -->
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		useStatusBarStore
	} from "@/store/index";
	import Competition from "@/compoments/discover/competition.vue";
	import Recommended from "@/compoments/discover/recommended.vue";
	import Follow from "@/compoments/discover/follow.vue";
	const childrenRef1 = ref(null);
	const childrenRef2 = ref(null);
	const childrenRef3 = ref(null);
	const info = ref({
		statusBarHeight: 0, //状态栏高度
		type: 1, //1赛事  2推荐  3关注
		city: '',
		region: ['广东省', '广州市', '海珠区'],
		cityFontSize: 28,
	})
	const statusBar = useStatusBarStore();
	onLoad((e) => {
		if (e.type) {
			info.value.type = e.type;
		}


	})
	onShow((e) => {
		info.value.statusBarHeight = statusBar.getStatusBarHeight();
		info.value.city = uni.getStorageSync('city');


	})
	//设置字体大小
	const setFontSize = () => {
		if (info.value.city.length > 3) {
			info.value.cityFontSize = 22;
		} else {
			info.value.cityFontSize = 28;
		}
	};
	//选择城市
	const changeCity = (e) => {
		info.value.city = e.detail.value[2];
		setFontSize();
		uni.setStorageSync('city', info.value.city);
		console.log(childrenRef2.value.data.form)
		if (info.value.type == 1) {
			childrenRef1.value.data.form.address = info.value.city;
			childrenRef1.value.changeCity();
		} else if (info.value.type == 2) {
			childrenRef2.value.data.form.address = info.value.city;
			childrenRef2.value.changeCity();
		} else if (info.value.type == 3) {
			childrenRef3.value.data.address = info.value.city;
			childrenRef3.value.changeCity();
		}



	};


	function onChangeType(type) {
		info.value.type = type;
	}
</script>

<style lang="scss">
	page {
		background: #F8F8F8;
	}

	.head-box {
		background-color: #FFFFFF;

		.head-b {
			height: 88rpx;
			padding: 0 30rpx;

			.coordinate {
				font-size: 28rpx;
				color: #707070;
				// margin-right: 96rpx;

				text {
					display: inline-block;
					margin-right: 16rpx;
					width: 86rpx;
					overflow: hidden;
					text-overflow: ellipsis; //文本溢出显示省略号
					white-space: nowrap; //文本不会换行
				}
			}

			.sort {

				.title-item {
					font-size: 30rpx;
					color: #2C2C2C;
					margin-right: 40rpx;

					.bottom-line {
						width: 30rpx;
						height: 8rpx;
						background-color: #FFFFFF;
						border-radius: 16rpx;
						margin-top: 4rpx;
					}

					.bottom-line-active {
						background-color: #5E77F8;
					}

				}

				.title-item-active {
					font-size: 30rpx;
					color: #2C2C2C;
					font-weight: bold;
				}
			}
		}
	}
</style>